<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        td{text-align: center;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script>
        $(function () {
            $("#test").click(function () {
                $("#pageNum").val(1);
                $.ajax({
                    url:"/queryByConditionsTest.do",
                    dataType:"json",
                    type:"post",
                    success:function (data) {
                        loadBooks(data)
                    }
                })
            });
            $("#queryBooks").click(function () {
                $("#pageNum").val(1);
                $.ajax({
                    url:"/queryByConditions.do",
                    dataType:"json",
                    data:{
                        booktype:$("#condition3").val(),
                        bookname:$("#condition2").val(),
                        pageNum:$("#pageNum").val()
                    },
                    type:"post",
                    success:function (data) {
                        loadBooks(data)
                    }
                })
            });
        });
        /*ajax成功方法*/
        function loadBooks(data) {
            $("#tabBody").html("");
            $("#tabFoot").html("");
            var temp=data.pageInfo;
            $.each(temp.list,function (n,vals) {
                $("#tabBody").append("<tr id='"+vals.bookId+"'>\n" +
                    "                        <td>"+vals.bookCode+"</td>\n" +
                    "                        <td>"+vals.typeName+"</td>\n" +
                    "                        <td>"+vals.bookName+"</td>\n" +
                    "                        <td>"+vals.bookAuthor+"</td>\n" +
                    "                        <td>"+vals.publishDate+"</td>\n" +
                    "                        </tr>");
            });
            $("#tabFoot").append( "<tr>\n"+
                "                        <td colspan='11' id='page'>" +
                "                        <input id='prePage' type='hidden' value='"+temp.prePage+"'>"+
                "                        <a href='javascript:queryByPages(1);'>首页</a>&nbsp;" +
                "                        </td>\n"+
                "                        </tr>\n"
            );
            if (temp.hasPreviousPage){
                $("#page").append("<a href='javascript:queryByPages("+temp.prePage+");'>上一页</a>&nbsp;");
            }
            if (temp.hasNextPage){
                $("#page").append("<a href='javascript:queryByPages("+temp.nextPage+");'>下一页</a>&nbsp;\n");
            }
            $("#page").append("<a href='javascript:queryByPages("+temp.pages+");'>尾页</a>");

        }
        /*根据页数查询数据*/
        function queryByPages(pageNum) {
            $("#pageNum").val(pageNum);
            $.ajax({
                url:"/queryByConditions.do",
                dataType:"json",
                data:{
                    booktype:$("#condition3").val(),
                    bookname:$("#condition2").val(),
                    pageNum:$("#pageNum").val()
                },
                type:"post",
                success:function (data) {
                    loadBooks(data)
                }
            })
        }




        /*页面加载时查询所有数据*/
        function loadBody() {
            $.ajax({
                url:"/queryByConditions.do",
                dataType:"json",
                data:{
                    booktype:$("#condition3").val(),
                    bookname:$("#condition2").val(),
                    pageNum:$("#pageNum").val()
                },
                type:"post",
                success:function (data) {
                    loadBooks(data)
                }
            })
        }


    </script>
</head>
<body onload="loadBody()">
<div class="total">
    <h2>图书管理系统</h2>
    <hr>
    <%--查询栏--%>
    <div class="find">
        <form action="" method="post" id="qForm">
            图书分类:
            <select name="borrow" id="condition3">
                <option value="">请选择</option>
                <option value="1">文史类</option>
                <option value="2">理工类</option>
                <option value="3">教育类</option>
                <option value="4">其他类</option>
            </select>
            &nbsp;
            图书名称:
            <input type="text" name="bookname" id="condition2">
            &nbsp;
            <input type="hidden" name="pageNum" id="pageNum">
            <input type="button" value="查询" id="queryBooks">
            <input type="button" value="test" id="test">
        </form>
    </div>
    <%--添加信息选项--%>
    <div class="add">
        <a href="/addBook.jsp">添加</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="/index.jsp">显示所有信息</a>
    </div>
    <div style="clear: both"></div>


    <%--页面显示信息--%>
    <div class="tablecss">
        <form method="post" enctype="multipart/form-data" id="aForm" action="">
            <table border="1" cellpadding="5px" cellspacing="0" style="width: 1055px">
                <thead>
                <tr id="1">
                    <td width="95px">图书编号</td>
                    <td width="80px">图书分类</td>
                    <td width="180px">图书名称</td>
                    <td width="150px">作者</td>
                    <td width="220px">出版时间</td>
                </tr>
                </thead>
                <tbody id="tabBody"></tbody>
                <tfoot id="tabFoot"></tfoot>
            </table>
        </form>
    </div>

</div>
</body>
</html>